<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div style="background-color: blue;width: 300px;height: 300px;" id="div1">
    this is div 1

    <div style="background-color: blanchedalmond;width: 200px;height: 200px; " id="div2">
      this is div 2
    </div>
  </div>

  <article>
    <ol>
      <li>
        <a href="https://www.runoob.com/try/try.php?filename=tryjsref_onmousemove_leave_out" target="_blank">以下实例演示了
          onmousemove,
          onmouseleave
          和 onmouseout 的区别。</a>
      </li>
      <li>
        <a href="https://www.runoob.com/try/try.php?filename=tryjquery_event_mouseenter_mouseover"
          target="_blank">该实例演示了onmousemove, onmouseenter 和 mouseover 事件的不同:</a>
      </li>
    </ol>
  </article>


  <script>
    const div1 = document.querySelector("#div1");
    div1.addEventListener("mouseenter", (event) => {
      console.log(event)
    })

    div1.addEventListener("mouseout", (event) => {
      console.log("mouseout", event)
    })
  </script>

</body>


</html>